<template>
  <!--  <scroll-view :scroll-y="true" style="height: 250px" class="bg-white">-->
  <!--    <view v-for="(item,index) in iconList" :key="index">-->
  <!--      {{item.emoji}}-->
  <!--    </view>-->
  <!--  </scroll-view>-->

  <scroll-view v-show="show" scroll-y style="height: 200px" class="bg-white radius-lg">
    <view class="cu-list grid col-5 no-border">
      <view v-for="(item,index) in iconList" :key="index" class="padding-xs" @click="select(item)">
        {{ item.emoji }}
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">

import {defineEmits, defineProps, ref} from "vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['onSelect'])

const iconList = ref([
  {
    emoji: '❤️'
  }, {
    emoji: '✨'
  }, {
    emoji: '😗'
  },
  {
    emoji: '😀'
  }, {
    emoji: '😄'
  }, {
    emoji: '😆'
  }, {
    emoji: '🤣'
  }, {
    emoji: '🙃'
  }, {
    emoji: '🥰'
  }, {
    emoji: '😍'
  }, {
    emoji: '🤩'
  }, {
    emoji: '😘'
  }, {
    emoji: '😙'
  }, {
    emoji: '😋'
  }, {
    emoji: '😛'
  }, {
    emoji: '😜'
  }, {
    emoji: '😝'
  }, {
    emoji: '🤫'
  }, {
    emoji: '😑'
  }, {
    emoji: '🙄'
  }, {
    emoji: '😔'
  }, {
    emoji: '😪'
  }, {
    emoji: '😕'
  }, {
    emoji: '☹️'
  }, {
    emoji: '😮'
  }, {
    emoji: '😰'
  }, {
    emoji: '😓'
  }, {
    emoji: '😩'
  }, {
    emoji: '😤'
  }, {
    emoji: '😡'
  }, {
    emoji: '😈'
  }, {
    emoji: '💀'
  }, {
    emoji: '🤡'
  }, {
    emoji: '👻'
  }, {
    emoji: '👋'
  }, {
    emoji: '🖐️'
  }, {
    emoji: '👌'
  }, {
    emoji: '👈'
  }, {
    emoji: '👉'
  }, {
    emoji: '🤙'
  }, {
    emoji: '🙏'
  }, {
    emoji: '🤳'
  }, {
    emoji: '💅'
  }, {
    emoji: '👃'
  }, {
    emoji: '👂'
  }, {
    emoji: '👀'
  }, {
    emoji: '👁️'
  }, {
    emoji: '👶'
  }, {
    emoji: '👧'
  }, {
    emoji: '👨‍🦳'
  }, {
    emoji: '🙍'
  }, {
    emoji: '🙅'
  }, {
    emoji: '💁'
  }, {
    emoji: '🙇'
  }, {
    emoji: '👩‍🍳'
  }, {
    emoji: '🧙'
  }, {
    emoji: '🚶'
  }, {
    emoji: '🧑‍🤝‍🧑'
  }, {
    emoji: '👫'
  }, {
    emoji: '💏'
  }, {
    emoji: '👪'
  }, {
    emoji: '👨‍👩‍👧‍👦'
  }, {
    emoji: '🌂'
  }, {
    emoji: '🎃'
  },
  {
    emoji: '🌈'
  }
])


const select = (item: any) => {
  emits('onSelect', item.emoji)
}
</script>

<style scoped>

</style>